<template>
  <div>
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul>
    <!-- 情况1 翻转  会更新页面-->
    <button @click="revArr">翻转数组</button>
    <!-- 情况2 截取  不会更新页面-->
    <button @click="sliArr">截取数组</button>
    <!-- 情况3 更新值 -->
    <button @click="updateVal">更新值</button>
  </div>
</template>

<script>
export default {
  name: 'VueThreeApp',

  data() {
    return {
      arr:[1,2,3,4,5,6]
      
    };
  },

  mounted() {
    
  },

  methods: {
    revArr(){
      //会修改原数组
      this.arr.reverse()
    },
    sliArr(){
      //不会修改原数组
      //返回值是新的数组，截取后的数组、
      //将返回值重新赋值给this.arr即可更新

    this.arr= this.arr.slice(0,3)
    },
    
updateVal(){
  //将第一个值修改为10
  //直接通过索引进行赋值，不会进行页面更新
  // this.arr[0]=10
  //vue提供了一个方法来帮助我们实现这个功能
  //this.$set()
  //参数1:要修改的数据对象,数组
  // 参数2:要修改的键，索引
  // 参数3：要修改的值
  this.$set(this.arr,0,10)
}  
},
};
</script>

<style lang="scss" scoped>

</style>